<!--
 * @Author: Betty
 * @Date: 2020-12-20 14:34:20
 * @LastEditors: Betty
 * @LastEditTime: 2020-12-20 16:40:49
 * @Description: Message全局提示组件
-->
<template>
  <teleport to="#message">
    <!-- 里面写上bootstrap的alert组件 -->
    <div v-if="isVisible" class="alert message-info w-50 mx-auto fixed-top d-flex justify-content-between mt-2"
     :class="classObject">
      <span>{{message}}</span>
      <button type="button" class="btn-close" aria-label="Close" @click.prevent="hide"></button>
    </div>
  </teleport>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'
// 创建一个提示语类型（字面量）
export type MessageType = 'success' | 'error' | 'default'
export default defineComponent({
  name: 'Message',
  props: {
    // 提示语
    message: {
      type: String
    },
    // 类型
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    }
  },
  emits: ['close-message'],
  setup(props, context) {
    // 在set执行的时候，创建好对应的DOM结构，等组件被卸载后移除，为了不手动创建div，也不让div冗余
    useDOMCreate('message')
    // 判断是否显示
    // 布尔类型，当前为true
    const isVisible = ref(true)
    // 创建一个对象，这个对象到时候可以用来做绑定class的对象语法
    const classObject = {
        'alert-primary': props.type === 'default',
        'alert-success': props.type === 'success',
        'alert-danger': props.type === 'error'
    }
    // 创建一个修改isVisible的方法
    const hide = () => {
        isVisible.value = false
        context.emit('close-message', true)
    }
    return {
        isVisible,
        classObject,
        hide
    }
  }
})
</script>

<style>
</style>

